<template>
   
    <el-form :model="errorRow"  label-position="left" style="background-color: white;">
                              <el-row>
                                <el-col :span="24">
                                  <h3>延期申请</h3>
                                </el-col>
                              </el-row>
        <el-row :gutter="2">
                  <el-col :span="7">
                    <el-form-item label="项目名称" label-width="80px">
                      <el-text class="mx-1">{{ errorRow.name }}</el-text>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="项目编号" label-width="80px">
                      <el-text class="mx-1">{{errorRow.projectId }}</el-text>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="项目类型" label-width="80px">
                      <el-text class="mx-1">{{ textCategory(errorRow.category) }}</el-text>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 第二行 -->
                <el-row :gutter="2">
                  <el-col :span="7">
                    <el-form-item label="负责人" label-width="80px">
                      <el-text class="mx-1">{{errorRow.masterName }}</el-text>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9">
                    <el-form-item label="学号" label-width="80px">
                      <el-text class="mx-1">{{ errorRow.masterId }}</el-text>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="老师" label-width="80px">
                      <el-text class="mx-1">{{ errorRow.tutorName }}</el-text>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- <el-row >
              <el-col :span="24">
                <el-form-item label="失败详情:" :label-width="formLabelWidth">
                  <el-text class="mx-1">{{ errorRow.msg }}</el-text>
                </el-form-item>
              </el-col>
            </el-row> -->
    </el-form>
    <el-form-item v-model="msg" label="延期原因" label-position="left" style="background-color: white;">
                <el-input
                v-model="msg"
                :rows="2"
                type="textarea"
                placeholder="请输入延期原因"
              />
            </el-form-item>
            <el-form-item label="提交" >
                <el-button type="primary" style="float: right; margin-right: 30px;" @click="Submit">提交</el-button>
            </el-form-item>
</template>
<style scoped>

</style>

<script setup>
import { Search } from '@element-plus/icons-vue'
import {getMidService,getErrorDetailService,uploadMidService,uploadService,sumbitExtension} from "@/api/Item.js"
import { ElMessage,ElMessageBox  } from 'element-plus';
import { ref } from 'vue';
//获取路径id
import { useRoute } from 'vue-router';
const route = useRoute();
// 获取路径参数 'id'
const id = ref(route.query.id);
const type=ref(route.query.type)
console.log(id.value)

//失败详情显示项目类型
const textCategory=(category)=>{
const categoryMap={
0:'创新训练项目',
1:"创业训练项目",
2:"创业实践项目"

}
return categoryMap[category]
}
//项目类别展示
const formatCategory=(row)=>{
const categoryMap={
0:'创新训练项目',
1:"创业训练项目",
2:"创业实践项目"

}
return categoryMap[row.category]
}

//详情数据模型
const errorRow=ref({
name:'',
projectId:'',
tutorName:'',
masterName:'',
masterId:'',
category:'',
msg:''
})

//获取数据
const handleDetail=async()=> {
let result= await getErrorDetailService(type.value,id.value)
console.log(result.data)
errorRow.value=result.data
}
handleDetail();

const msg=ref('')
//提交延期申请
import { useRouter } from 'vue-router';
const router = useRouter();
const Submit=async()=>{
    let params={
        msg:msg.value
    }
    let result=await sumbitExtension(errorRow.value.projectId,2,msg.value)
    if(result.code===200){
        ElMessage.success("延期申请成功")
        router.push({ path: '/project/closing_item' });
    }
   
}
</script>
